<template>
  <div class="index">
    <div class="banner">
      <swiper :options="swiperOption">
        <swiper-slide>
          <div class="bg bg2">
            <!-- <img
              class="img1"
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAg-ICk0QUostGe9gUw2gM4lgE.png.webp"
            />
            <img
              class="img2"
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAgmIGk0QUoxLilswEw2QI4Kg.png.webp"
              alt=""
            />
            <img
              class="img3"
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAgv4Gk0QUo2pq1aDDiATgb.png.webp"
              alt=""
            /> -->
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="bg bg1">
            <!-- <p class="img4">车/品/服/务/一/站/购/齐</p>
            <img
              class="img5"
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAgl4Kk0QUo6oDM7AcwgQM4cA.png.webp"
              alt=""
            />
            <img
              class="img6"
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAg8YGk0QUo-4fB2AMwrAM49AI.png.webp"
              alt=""
            />
            <p class="img7">
              <span>各式</span><span class="s2">精品配件</span>
            </p> -->
          </div>
        </swiper-slide>
        <div
          class="swiper-pagination"
          slot="pagination"
        ></div>
      </swiper>
      <!-- <div class="articel">
        <p>
          <span class="main">会员资讯（收费资讯）</span>
          <span>更多>></span>
        </p>
        <p>寻求车载充电器制作厂家，可支持贴牌服务</p>
        <p>大量采购汽车电瓶，全新二手都可以，大量收购</p>
        <p>求购二手车衣车型别克英朗</p>
        <p>急需汽车轮胎CC6 225/55R16 95W FR！！！</p>
        <div>
          <img
            src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAg4uyn0QUox5PivAMw1gE4FQ.png.webp"
            alt=""
          />
        </div>
        <div class="downimg">
          <p class="pp1">汽配品质钜惠</p>
          <p class="pp2">全场大优惠 较高低至五折</p>
          <img
            src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAgnuun0QUojtDv0gcwygE44gE.png.webp"
            alt=""
          />
        </div>
      </div> -->
    </div>
    <!-- <div class="container ct">
      <span class="title">商城精选</span>
      <span class="subtitle">明星单品精选</span>
    </div> -->
    <div class="container">
      <!-- <div
        class="scjx"
        v-if="data"
      >
        <div class="img">
          <img
            src="//13439588.s61i.faiusr.com/2/AD0I5KS0BhACGAAgqam8xwUogMaP6gcw5QE4swI.jpg.webp"
            alt=""
          />
          <div class="context">
            <p>限时抢购</p>
            <p>配件批发市场</p>
          </div>
        </div>
        <item
          @click.native="detail(0)"
          v-for="(v, k) of data"
          :key="k"
          :title="v.title"
          :price="v.price"
          :pic="v.img"
        />
      </div> -->
      <div v-if="floor && fl">
        <div
          class="floor"
          v-for="i of 4"
          :key="i"
        >
          <div class="cell">
            <span class="c1">{{ i }}F</span>
            <span class="c2">{{ fl[i - 1].title }}</span>
            <span class="c3">{{ floor.subtitle }}</span>
            <span class="c4">
              <span
                class="c4_item"
                v-for="(v1, k1) of floor.name"
                :key="k1"
              >{{
                v1
              }}</span>
            </span>
          </div>
          <div class="hr"></div>
          <div class="main">
            <div class="left">
              <p class="l1">{{ floor.one.title }}</p>
              <div class="hx"></div>
              <p class="l2">{{ floor.one.subtitle }}</p>
              <img
                class="l3"
                :src="floor.one.img"
                alt=""
              />
              <p class="l4">{{ floor.two.title }}</p>
              <p class="l5">{{ floor.two.subtitle }}</p>
              <img
                class="l6"
                :src="floor.two.img"
                alt=""
              />
              <!-- <div class="btn">查看更多</div> -->
            </div>
            <div class="right">
              <div
                class="main_item"
                v-for="(v2, k2) of fl[i - 1].details"
                :key="k2"
                @click="detail(i - 1, k2)"
              >
                <div class="img"><img
                    :src="v2.img"
                    alt=""
                    width="100%"
                  /></div>
                <p class="rtitle">{{ v2.title }}</p>
                <p class="rprice">￥{{ v2.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterSub />
  </div>
</template>

<script>
import item from "../components/Item";
export default {
  components: { item },
  methods: {
    detail (index, i) {
      this.$router.push("/details?index=" + index + "&i=" + i);
    },
  },
  data () {
    return {
      fl: null,
      floor: null,
      data: null,
      swiperOption: {
        effect: "fade",
        loop: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
      },
    };
  },
  mounted () {
    this.axios.get("json/scjx.json").then((res) => {
      this.data = res.data.data;
    });
    this.axios.get("json/floor.json").then((res) => {
      this.floor = res.data;
    });
    this.axios.get("json/headerfl.json").then((res) => {
      this.fl = res.data.res;
    });
  },
};
</script>

<style lang="scss" scoped>
.banner {
  margin-bottom: 50px;
  width: 100%;
  position: relative;
  .articel {
    z-index: 100;
    position: absolute;
    top: 10px;
    right: 60px;
    box-sizing: border-box;
    width: 237px;
    height: 430px;
    background-color: #e6fcff;
    opacity: 0.9;
    padding: 16px;
    font-size: 12px;
    color: #656565;
    font-weight: 600;
    .main {
      color: #494949;
      font-size: 16px;
    }
    p {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 9px 0;
    }
    .downimg {
      position: relative;
      text-align: center;
      color: #252525;
      font-weight: 500;
      .pp1 {
        position: absolute;
        top: 10px;
        left: 0;
        font-size: 20px;
      }
      .pp2 {
        position: absolute;
        font-size: 14px;

        top: 50px;
        left: 0;
      }
    }
  }
}
.bg {
  width: 100%;
  height: 450px;
  background-repeat: no-repeat;
  background-position-x: center;
  // background-position-x: -280px;
  position: relative;
  img {
    position: absolute;
  }
}
.bg.bg1 {
  // background-image: url("//13439588.s61i.faiusr.com/2/AD0I5KS0BhACGAAg44Ck0QUo3v-bUTCADzjAAw.jpg");
  background-image: url("../assets/swiper/1.png");
  .img4 {
    position: absolute;
    font-size: 22px;
    color: #fff;
    font-style: italic;
    top: 110px;
    left: 350px;
  }
  .img5 {
    position: absolute;
    top: 160px;
    left: 340px;
  }
  .img6 {
    position: absolute;
    top: 32px;
    left: 720px;
  }
  .img7 {
    font-size: 32px;
    color: #fff;
    font-style: italic;
    position: absolute;
    top: 300px;
    left: 350px;
    .s2 {
      color: #f6fe00;
    }
  }
}
.bg.bg2 {
  // background-image: url("//13439588.s61i.faiusr.com/2/AD0I5KS0BhACGAAg2oCk0QUo8Jv3vAcwgA84wAM.jpg");
  background-image: url("../assets/swiper/2.png");
  .img1 {
    top: 40px;
    left: 435px;
  }
  .img2 {
    top: 210px;
    left: 490px;
  }
  .img3 {
    top: 216px;
    left: 550px;
  }
}
.scjx {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.img {
  border: 1px solid transparent;
  position: relative;
}
.img .context {
  width: 162px;
  height: 81px;
  border: 1px solid #fff;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.img .context p {
  color: #fff;
  font-size: 24px;
  margin: 8px 0;
}
.ct {
  display: flex;
  align-items: center;
  margin: 24px auto;
}
.title {
  font-size: 24px;
  color: #101010;
}
.subtitle {
  margin-left: 14px;
  font-size: 14px;
  line-height: 14px;
  color: #848484;
}
.rmhd {
  padding-bottom: 80px;
  .rmhd_title {
    font-size: 20px;
    color: #3b3b3b;
    font-weight: 700;
    padding: 16px 8px;
  }
  .rmhd_container {
    display: flex;
    justify-content: space-between;
    .rmhd_item {
      padding-bottom: 40px;
      background-color: #f9f9f9;
      div {
        width: 290px;
        height: 170px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .p1 {
        margin-top: 36px;
        text-align: center;
        color: #3b3b3b;
        font-size: 16px;
      }
      .p2 {
        margin-top: 16px;
        text-align: center;
        color: #9f9f9f;
        font-size: 14px;
      }
    }
  }
}
.floor {
  margin-bottom: 38px;
  .cell {
    margin-top: 60px;
    .c1,
    .c2 {
      color: #222;
      font-size: 20px;
      font-weight: 700;
    }
    .c2,
    .c3 {
      margin-left: 16px;
    }
    .c3,
    .c4 {
      color: #666;
      font-size: 15px;
    }
    .c4 {
      margin-top: 5px;
      float: right;
      .c4_item {
        margin: 0 4px;
      }
    }
  }
  .hr {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
  }
  .main {
    position: relative;
    .left {
      position: relative;
      background-size: 572px 420px;
      width: 572px;
      height: 420px;
      background-repeat: no-repeat;
      background-image: url("//13439588.s61i.faiusr.com/2/AD0I5KS0BhACGAAgseO8xwUo1-qtvgIwvAQ4pAM.jpg.webp");
      .l1,
      .l2 {
        position: absolute;
        color: #fff;
      }
      .hx {
        position: absolute;
        height: 1px;
        background-color: #fff;
        width: 35%;
        top: 96px;
        left: 15px;
      }
      .l1 {
        font-size: 18px;
        top: 64px;
        left: 21px;
      }
      .l2 {
        font-size: 22px;
        top: 110px;
        left: 25px;
      }
      .l3 {
        width: 163px;
        position: absolute;
        bottom: 30px;
        left: 35px;
        width: 150px;
        height: 205px;
      }
      .l4 {
        position: absolute;
        top: 55px;
        right: 145px;
        color: #2d2d2d;
        font-size: 24px;
      }
      .l5 {
        position: absolute;
        top: 90px;
        right: 180px;
        color: #a1a1a1;
        font-size: 16px;
      }
      .l6 {
        width: 220px;
        position: absolute;
        bottom: 20px;
        right: 50px;
        width: 240px;
        height: 220px;
      }
      .btn {
        position: absolute;
        right: 220px;
        top: 130px;
        background-color: #ff6637;
        color: #fff;
        padding: 10px 16px;
        border-radius: 3px;
      }
    }
    .right {
      position: absolute;
      top: 0;
      left: 572px;
      right: 0;
      bottom: 0;
      display: flex;
      flex-wrap: wrap;
      .main_item {
        text-align: center;
        width: 199px;
        height: 205px;
        margin-left: 10px;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        .img {
          margin: 10px auto;
          width: 140px;
          height: 120px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            vertical-align: middle;
            transition: 0.618s linear;
            &:hover {
              transform: scale(1.5);
            }
          }
        }
        .rtitle {
          color: #979797;
          font-size: 15px;
          padding: 0 0 10px 0;
        }
        .rprice {
          font-size: 15px;
          color: #454545;
        }
        &:nth-child(1) {
          margin-bottom: 10px;
        }
        &:nth-child(2) {
          margin-bottom: 10px;
        }
        &:nth-child(3) {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
